<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>03css고급선택자</title>
		<style type="text/css">
			#first, #fourth { font-size: 24px; color: orange; font-style: italic; } /* 그룹선택자 */
			
			#hmenu li { color: red; } /* 후손선택자 */
			#fmenu li{ color: navy; }
			
			#hmenu2 > li { color: cyan; } /* 자식선택자 */
			#fmenu2 > li { color: gold; }
			#headers > h1 { color: gray; }
			
			div + p { color: green; }
			p + p { color: purple;}
			
		</style>
		
	</head>
	<body>
		<h1>CSS 고급 선택자</h1>
		<h2>그룹group 선택자</h2>
		<p>하나 이상의 요소에 특정 스타일 적용</p>
		<p>각 요소들은 ,로 구분</p>
		<div id="first">첫번째</div>
		<div id="second">두번째</div>
		<div id="third">세번째</div>
		<div id="fourth">네번째</div>
		
		<hr />
		<h2>후손 선택자</h2>
		<p>부모 선택자를 기준으로 모든 하위 선택자를 선택해서 스타일 적용</p>
		<p>HTML 문서의 계층 구조를 이용</p>
		<ul id="hmenu">
			<li>
				<ol>
					<li>Home</li>
					<li>About</li>
				</ol>
			</li>
			<li>메일</li>
			<li>더보기</li>
		</ul>
		<ul id="fmenu">
			<li>회사소개</li>
			<li>제휴제안</li>
			<li>이용약관</li>
		</ul>
		
		<hr />
		<h2>자식child 선택자</h2>
		<p>부모 선택자를 기준으로 모든 자식 요소를 대상으로 스타일 적용</p>
		<p>HTML 문서의 계층 구조를 이용</p>
		<div id="headers">
			<h1>제목</h1>
			<div id="sub"><h1>제목2</h1></div>
		</div>
		<ul id="hmenu2">
			<li>
				<ol>
					<li>Home</li>
					<li>About</li>
				</ol>
			</li>
			<li>메일</li>
			<li>더보기</li>
		</ul>
		<ul id="fmenu2">
			<li>회사소개</li>
			<li>제휴제안</li>
			<li>이용약관</li>
		</ul>
		
		<hr />
		<h2>인접Adjacent 선택자</h2>
		<p>동일 계층안에서 한 요소를 기준으로 바로 뒤 요소를 선택해서 스타일 적용</p>
		<p>HTML 문서의 계층구조를 이용</p>
		<div>
			<p>첫번째 줄</p>
			<p>두번째 줄</p>
			<div>블럭요소</div>
			<p>세번째 줄</p>
		</div>
		<p>네번째 줄</p>
		
		<hr />
		<h2>선택자 우선순위</h2>
		<p>!important(속성값 뒤에 추가)</p>
		<p>인라인 스타일(style태그로 적용)</p>
		<p>id선택자('#이름'으로 적용)</p>
		<p>class선택자('.이름'으로 적용)</p>
		<p>가상 class선택자(':이름'으로 적용)</p>
		<p>타입 선택자('요소이름'으로 적용)</p>
		
	</body>
</html>
